<script setup>
	import { bind } from 'lodash'
	import { ref, onMounted, computed } from 'vue'
	const props = defineProps({
		text: {
			type: String,
		},
		boxHeight: {
			type: String,
			default: '28px',
		},
		boxWidth: {
			type: String,
			default: '240px',
		},
		animationDelayTime: {
			type: String,
			default: '0.5s',
		},
		fontSize: {
			type: String,
			default: '17px',
		},
	})
	// 根据字符串长度计算滚动速度

	// 滚动状态变量
	const isScroll = ref(false)

	//	滚动秒数
	const scrollSecond = computed(() => {
		return props.text.length <= 3
			? '2.5s'
			: Math.round(props.text.length / 3) + 's'
	})

	const addAnimation = () => {
		if (textDivRef.value.clientWidth > props.boxWidth.split('p')[0]) {
			isScroll.value = true
		}
		const second = ref(parseInt(scrollSecond.value.split('s')[0]) * 1000 + 500)
		setTimeout(() => {
			isScroll.value = false
		}, second.value)
	}

	const textDivRef = ref()
</script>
<template>
	<div @mouseenter="addAnimation()" class="text-box">
		<div
			ref="textDivRef"
			:class="{
				scroll: isScroll,
			}"
		>
			{{ text }}
		</div>
	</div>
</template>
<style scoped lang="less">
	.scroll {
		animation: scrollText v-bind(scrollSecond) linear v-bind(animationDelayTime);
	}
	.text-box {
		height: v-bind(boxHeight);
		width: v-bind(boxWidth);
		text-align: center;
		overflow: hidden;
		> div {
			display: flex;
			justify-content: start;
			align-items: center;
			height: 100%;
			// fit-content意思为宽度适应内容
			width: fit-content;
			width: -webkit-fit-content;
			width: -moz-fit-content;
			white-space: nowrap;
			font-size: v-bind(fontSize);
		}
	}

	@keyframes scrollText {
		0% {
			transform: translateX(0%);
		}
		65% {
			transform: translateX(-65%);
		}
		100% {
			transform: translateX(0%);
		}
	}
</style>
